<script setup>
import { AnswerService } from '@/service/Answer';
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { CommonService } from '../common';
const router = useRouter();
const route = useRoute();
const answerList = ref([]);

const getAnalysis = (AnalysisTotal) => {
    return JSON.parse(AnalysisTotal).Analysis.score;
}

let snStr = "";
onMounted(() => {
    snStr = route.params.sn + "";
    queryAnswers(snStr);
})

// 查询商品函数
const queryAnswers = async (sn) => {
    try {
        const result = await AnswerService.queryUserAnswerList(sn, "0");
        if (result.Code !== 1000) {
            alert(result.Title)
        } else {
            answerList.value = result.Data["answer"];
        }
    } catch (error) {
        alert('查询商品时发生错误' + error);
    }
};

const gotouserAnalysis = () => {

    router.push({ path: `/userAnalysis/${snStr}` });
}
const openChat = () => {
    router.push({ path: `/chat/${snStr}` });
}
</script>

<template>
    <div class="card">
        <!-- 其他代码部分 -->
        <DataView :value="answerList" :layout="layout">
            <template #header>
                <div class="flex justify-end">
                    <SelectButton v-model="layout" :options="options" :allowEmpty="false">
                        <template #option="{ option }">
                            <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                        </template>
                    </SelectButton>
                </div>
            </template>

            <template #list="slotProps">
                <div class="flex flex-col ">
                    <div v-for="(item, index) in slotProps.items" :key="index">
                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4"
                            :class="{ 'border-t border-surface': index !== 0 }">

                            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                <div class="flex flex-row md:flex-col justify-between items-start gap-4">

                                    <div class="text-lg   mt-2 ">

                                        <span style="  margin-right:20px;">访谈人：{{
                                            item.AskName }}</span>
                                        <span style="margin-right:20px;">访谈时间:{{
                                            CommonService.formatFullDate(item.Creattime) }}</span>

                                    </div>

                                    <div class="bg-surface-100 p-1" style="border-radius: 5px">
                                        {{ getAnalysis(item.Analysis) }}
                                    </div>
                                </div>
                                <div class="flex flex-col md:items-end gap-2" >

                                    <div class="flex flex-row-reverse md:flex-row gap-2">

                                        <Button label="查看详情" @click="gotouserAnalysis()" v-if="item.Kind==0"
                                            class="flex-auto md:flex-initial whitespace-nowrap"></Button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>


        </DataView>
        <div class="w-full text-center">
            <Button label="填写访谈" @click="openChat()" class="flex-auto md:flex-initial whitespace-nowrap  "></Button>
        </div>
    </div>

</template>

<style scoped lang="scss">
:deep(.p-datatable-frozen-tbody) {
    font-weight: bold;
}


:deep(.p-datatable-scrollable.p-frozen-column) {
    font-weight: bold;
}
</style>
